<template>
    <show-modal :title="title" :loading="loading" width="600px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="菜单名称" prop="menuName">
                <a-input v-model="form.menuName" placeholder="请输入菜单名称" />
            </a-form-model-item>
            <a-form-model-item label="菜单类型" prop="menuType">
                <a-radio-group :options="menuTypes" v-model="form.menuType" />
            </a-form-model-item>
            <a-form-model-item label="上级菜单" prop="parentId">
                <a-tree-select style="width: 100%" v-model="form.parentId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择上级菜单" allow-clear
                    :replaceFields="replaceFields" :tree-data="treeData">
                </a-tree-select>
            </a-form-model-item>

            <a-form-model-item label="菜单图标" prop="icon" v-if="form.menuType != 'F'">
                <a-popover v-model="visible" trigger="click">
                    <div slot="content">
                        <a-list style="width: 400px" :grid="{ gutter: 6, column: 6 }" :data-source="localIcon">
                            <a-list-item slot="renderItem" slot-scope="item">
                                <div class="text-center pointer icon-wrapper"
                                    @click.capture.stop="selectIcon(item, $event)">
                                    <svg-icon :icon="item" :size="20" class="disabled" />
                                </div>
                            </a-list-item>
                        </a-list>
                    </div>
                    <a-input v-model="form.icon" placeholder="请选择图标">
                        <svg-icon v-if="form.icon" slot="prefix" :icon="form.icon" />
                    </a-input>
                </a-popover>
            </a-form-model-item>
            <!-- <a-form-model-item label="是否显示">
                <a-switch default-checked @change="onChangeShow" />
            </a-form-model-item> -->
            <a-form-model-item label="权限名称" prop="path" v-if="form.menuType != 'C'">
                <a-input v-model="form.path" placeholder="请输入权限名称" />
            </a-form-model-item>

            <a-form-model-item label="显示菜单" v-if="form.menuType != 'F'" prop="extendone">
                <a-radio-group :options="isShowMenu" v-model="form.extendone" />
            </a-form-model-item>

            <a-form-model-item label="是否跳出" v-if="form.menuType == 'C'" prop="isExternal">
                <a-radio-group :options="extrenalList" v-model="form.isExternal" />
            </a-form-model-item>
            <a-form-model-item label="是否开放租户" prop="isUniq">
                <a-radio-group :options="isSuperTypes" v-model="form.isUniq" />
            </a-form-model-item>

            <a-form-model-item label="路径" prop="path" v-if="form.menuType == 'C'">
                <a-select showSearch v-model="form.path" placeholder="请选择文件路径">
                    <a-select-option :value="item.value" v-for="(item, index) in routeList" :key="index">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item label="排序" prop="orderNum">
                <a-input-number class="form_item" type="number" v-model="form.orderNum" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import localIcon from './localIcon';
import { menuTypes, isSuperTypes, isShowMenu,extrenalList } from '../dictionary';
import { addInfo, updateInfo } from '@/api/system/menu';
const path = require('path');

export default {
    name: 'MenuInfo',
    props: {
        list: {
            type: Array,
            default: () => []
        },
        info: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            loading: false,
            title: '菜单信息',
            localIcon,
            rules,
            menuTypes,
            isSuperTypes,
            isShowMenu,
            extrenalList,
            form: {
                menuName: '',
                menuType: 'M',
                parentId: undefined,
                path: undefined,
                icon: '',
                isExternal:'false',
                isUniq: '1',
                extendone: 'false',
                orderNum: 0,
                status: 1
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            visible: false,
            routeList: [],
            replaceFields: {
                children: 'children',
                title: 'menuName',
                key: 'menuId',
                value: 'menuId'
            },
            treeData: [
                {
                    menuName: '顶级菜单',
                    menuId: '-1',
                    children: [...this.list]
                }
            ]
        };
    },
    created() {
        this.form = { ...this.form, ...this.info };
        this.findFiles();
    },
    methods: {
        //提交信息
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let form = this.form;
                        let res = null;
                        if (form.menuId) {
                            //编辑
                            res = await updateInfo(form);
                        } else {
                            //新增addInfo
                            res = await addInfo(form);
                        }
                        let { code } = res;
                        if (code == 200) {
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        }
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        // 扫描文件
        findFiles() {
            let files = require.context('@/views/', true, /\.vue$/);
            let list = [];
            files.keys().forEach(key => {
                const filePath = path.dirname(key);
                const name = path.basename(key, '.vue');
                if (!key.includes('components')) {
                    list.push({
                        value: filePath.substring(1) + '/' + name
                    });
                }
            });
            this.routeList = list;
        },
        //选择图标
        selectIcon(item, event) {
            this.form.icon = item;
            this.visible = false;
        },
        //切换路由显示隐藏
        onChangeShow(checked) {
            this.isShow = checked;
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped></style>
